<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page" />
<html class="loginHtml">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="${path}/static/jsp/favicon.ico">
    <link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${path}/static/css/public.css" media="all" />
</head>
<body class="loginBody">
<form class="layui-form" >
    <div style="margin-top: 25px;margin-bottom:25px; font-size: x-large; text-align: center;">
        <p>登录</p>
    </div>
    <div class="layui-form-item input-item">
        <label >用户名</label>
        <input type="text"  placeholder="请输入用户名" autocomplete="off" name="username" id="username" class="layui-input" lay-verify="required">
    </div>
    <div class="layui-form-item input-item">
        <label >密码</label>
        <input type="password" id="password"
                                                placeholder="请输入密码" autocomplete="off" name="password"
                                                class="layui-input" lay-verify="pass">
    </div>
    <div class="layui-form-item" style="display: flex; margin-bottom: 10px;">
        <label >验证码</label>
        <input type="text" id="code" placeholder="验证码" autocomplete="off" class="layui-input" lay-verify="code">
        <canvas id="canvas" width="100%" height="35"></canvas>
    </div>
    <input class="layui-btn layui-block" type="submit" lay-filter="login" lay-submit value="登录"/>
    <div class="layui-input-inline" style="padding-right: 0px;padding-top: 15px">
        <a  href="${pageContext.request.contextPath}/register">立即注册</a>
    </div>
</form>
<script type="text/javascript" src="${path}/static/layui/layui.js"></script>
<script type="text/javascript" src="${path}/static/js/login.js"></script>
<script>
    layui
        .use(
            [ 'form', 'layer', 'jquery' ],
            function() {
                var form = layui.form;
                var layer=layui.layer;
                 var  $ = layui.jquery;

                 //密码验证
                form.verify({
                    pass: [
                        /^[\S]{6,12}$/
                        ,'密码必须6到12位，且不能出现空格'
                    ]
                });
                //验证码
                var code=$("#code").val();
                if(code==''){
                    form.verify({
                        code:[
                            /^[\S]{4}$/,
                            '验证码不能为空'
                        ]
                    })
                }else {

                }
                //添加表单监听事件,提交注册信息
                form.on('submit(login)', function() {
                    var name=$('#username').val()
                    var pwd=$('#password').val()
                    $.ajax({
                        url:'${pageContext.request.contextPath}/user/login',
                        type:'post',
                        dataType:'JSON',
                        data:{
                            username:name,
                            password:pwd,
                        },
                        success:function(msg){
                            if (msg == "1") {
                               window.location.href = "http://localhost:8080/index";
                                layer.msg('登录成功');
                            }else {
                                layer.msg('登录失败');
                            }
                        }
                    })
                });

                //验证码的产生
                function draw(show_num) {
                    var canvas_width = $('#canvas').width();
                    var canvas_height = $('#canvas').height();
                    var canvas = document.getElementById("canvas");
                    var context = canvas.getContext("2d");
                    canvas.width = canvas_width;
                    canvas.height = canvas_height;
                    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                    var aCode = sCode.split(",");
                    var aLength = aCode.length;
                    for (var i = 0; i <= 3; i++) {
                        var j = Math.floor(Math.random() * aLength);
                        var deg = Math.random() * 30 * Math.PI / 180;
                        var txt = aCode[j];
                        show_num[i] = txt.toLowerCase();
                        var x = 10 + i * 20;
                        var y = 20 + Math.random() * 8;
                        context.font = "bold 23px 微软雅黑";

                        context.translate(x, y);
                        context.rotate(deg);

                        context.fillStyle = randomColor();
                        context.fillText(txt, 0, 0);

                        context.rotate(-deg);
                        context.translate(-x, -y);
                    }
                    for (var i = 0; i <= 5; i++) {
                        context.strokeStyle = randomColor();
                        context.beginPath();
                        context.moveTo(Math.random() * canvas_width, Math.random()
                            * canvas_height);
                        context.lineTo(Math.random() * canvas_width, Math.random()
                            * canvas_height);
                        context.stroke();
                    }
                    for (var i = 0; i <= 30; i++) {
                        context.strokeStyle = randomColor();
                        context.beginPath();
                        var x = Math.random() * canvas_width;
                        var y = Math.random() * canvas_height;
                        context.moveTo(x, y);
                        context.lineTo(x + 1, y + 1);
                        context.stroke();
                    }
                };

                function randomColor() {
                    var r = Math.floor(Math.random() * 256);
                    var g = Math.floor(Math.random() * 256);
                    var b = Math.floor(Math.random() * 256);
                    return "rgb(" + r + "," + g + "," + b + ")";
                };

                //表单输入效果
                $(".loginBody .input-item").click(
                    function(e) {
                        e.stopPropagation();
                        $(this).addClass("layui-input-focus")
                            .find(".layui-input").focus();
                    })
                $(".loginBody .layui-form-item .layui-input")
                    .focus(
                        function() {
                            $(this).parent().addClass(
                                "layui-input-focus");
                        })
                $(".loginBody .layui-form-item .layui-input").blur(
                    function() {
                        $(this).parent().removeClass(
                            "layui-input-focus");
                        if ($(this).val() != '') {
                            $(this).parent().addClass(
                                "layui-input-active");
                        } else {
                            $(this).parent().removeClass(
                                "layui-input-active");
                        }
                    })
            })
</script>
</body>
</html>
